<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "../javascripts/ext/ux/css/GroupTab.css" %>

    <%= stylesheet_link_tag "/stylesheets/tasks.css" %>

    <%= javascript_include_tag "ext/adapter/ext/ext-base.js" %>
    <%= javascript_include_tag "ext/ext-all.js" %>

    <%= javascript_include_tag "ext/ux/GroupTabPanel.js" %>
    <%= javascript_include_tag "ext/ux/GroupTab.js" %>

    <%= javascript_include_tag "ext/src/locale/ext-lang-zh_CN.js" %>
    <script type="text/javascript">
      Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '/javascripts/ext/resources/images/default/s.gif';
        var groupTab = new Ext.ux.GroupTabPanel({
          tabWidth: 130,
          activeGroup: 0,
          items: [{
              mainItem: 1,
              items: [{
                  title: 'Subscriptions',
                  iconCls: 'x-icon-subscriptions',
                  tabTip: 'Subscriptions tabtip',
                  style: 'padding: 10px;',
                  html: 'test'
                }, {
                  title: 'Users',
                  iconCls: 'x-icon-users',
                  tabTip: 'Users tabtip',
                  style: 'padding: 10px;',
                  html: 'test'
                }]
            }, {
              expanded: true,
              items: [{
                  title: 'Configuration',
                  iconCls: 'x-icon-configuration',
                  tabTip: 'Configuration tabtip',
                  style: 'padding: 10px;',
                  html: 'test'
                }, {
                  title: 'Email Templates',
                  iconCls: 'x-icon-templates',
                  tabTip: 'Templates tabtip',
                  style: 'padding: 10px;',
                  html: 'test'
                }]
            }, {
              expanded: true,
              items: [{
                  title: '采购系统',
                  iconCls: 'x-icon-configuration',
                  tabTip: 'Configuration tabtip',
                  style: 'padding: 10px;',
                  html: '采购系统'
                }]
            }, {
              expanded: true,
              items: [{
                  title: '销售系统',
                  iconCls: 'x-icon-configuration',
                  tabTip: 'Configuration tabtip',
                  style: 'padding: 10px;',
                  html: '销售系统'
                }]
            }, {
              expanded: true,
              items: [{
                  title: '库存系统',
                  iconCls: 'x-icon-configuration',
                  tabTip: 'Configuration tabtip',
                  style: 'padding: 10px;',
                  html: '库存系统'
                }]
            }]

        });
        
        groupTab.add({
                  title: '会计系统',
                  iconCls: 'x-icon-configuration',
                  tabTip: 'Configuration tabtip',
                  style: 'padding: 10px;',
                  html: '会计系统'
                }).show();
        new Ext.Viewport({
          enableTabScroll: true,
          layout: "fit",
          items: [groupTab]
        });
      });
    </script>
  </head>
  <body></body>
</html>
